<template>
  <div>
    <!-- template 其实是一个模板，还不是真实的 DOM，挂载后才生成真实的 DOM -->
    <h1>这是一个子组件，用来查看生命周期函数</h1>
    <h2>{{ msg }}</h2>
    <ul id="myUL">
      <li
        v-for="(val, index) in arr"
        :key="index"
      >
        {{ val }}
      </li>
    </ul>
    <button @click="arr.push(1000)">点击末尾加值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
      arr: [1, 2, 3, 4],
      timer: null,
    };
  },
  beforeCreate() {
    // console.log("beforeCreate -- 执行了");
    // console.log(11111, this.msg); // null ， 数据还没初始化
  },
  created() {
    // console.log("created -- 执行了");
    // // 注意：初始化阶段其实还没有 DOM
    // console.log(document.querySelector("h1"));
    // console.log(22222, this.msg); // 'Hello Vue' ，有数据了
    // // 一般发送网络请求是在 created 中
    // setTimeout(() => {
    //   console.log("获取网络请求数据成功");
    //   this.msg = '网络数据'
    // }, 1000);
    // 定时器是属于浏览器的，启动后，浏览器没关闭或没有清除定时器，定时器就一直在运行
    this.timer = window.setInterval(() => {
      console.log("定时器正在运行");
    }, 1000);
  },
  beforeMount() {
    // console.log("beforeMount --- DOM挂载前");
    // console.log(3333, document.querySelector("h1")); // null
  },
  mounted() {
    // console.log("mounted --- DOM挂载完成");
    // console.log(4444, document.querySelector("h1")); // 有 DOM 节点，能操作 DOM 了
  },
  // 只有 data 的数据发生变化时
  beforeUpdate() {
    // console.log("beforeUpdate --- DOM结构更新前");
    // console.log(5555, document.querySelectorAll("#myUL li")[4]);
  },
  updated() {
    // 场景: 获取更新后的真实DOM
    // console.log("updated --- DOM结构更新完成");
    // console.log(6666, document.querySelectorAll("#myUL li")[4]);
  },
  beforeDestroy() {
    console.log("beforeDestroy --- 组件销毁前");
  },
  destroyed() {
    console.log("destroyed --- 组件销毁完成");
    // 🔔 定时器属浏览器的功能，不属于组件的，所以组件销毁后，需要主动清除定时器
    clearInterval(this.timer);
  },
};
</script>

<style>
</style>